<template>
	<view class="prizelist">
		<view class="prize-box" v-for="(item,index) in listdata">
			<!--是否参与icon-->
			<view v-if="is_main">
				<image v-if="item.iId>0" class="joinicon" src="/static/image/alreadyInvolved.png" mode="aspectFill"></image>
			</view>
			<view v-else>
				<image v-if="item.bl_id>0" class="joinicon" src="/static/image/already-add.png" mode="aspectFill"></image>
			</view>
			<!--奖品详情-->
			<view class="prize-item">
				<!--删除按钮-->
				<!-- <view class="modeldel" @click="modeldel(item.id)" v-if="is_self">
					<text>×</text>
				</view>
 -->
				<!--抽奖图片-->
				<image class="prizeimg" :src="item.thumb" mode="aspectFill" @click="goto_lottey(index)"></image>
				<view class="prizedetail">
					<view class="item-top">
						<view class="title">{{item.title.length>12?item.title.substring(0,12)+'...':item.title}}</view>
					</view>
					<view class="item-bottom">
						<view class="prize-info"  @click="goto_lottey(index)">
							<!--抽奖高级选项图标-->
							<view class="senior" >
								<image v-if="item.redCount>0" :src="seniorIcon[0]" mode="aspectFill"></image>
								<image v-if="item.boost>0" :src="seniorIcon[1]" mode="aspectFill"></image>
								<image v-if="item.pay_total>0" :src="seniorIcon[2]" mode="aspectFill"></image>
							</view>
							<!--开奖方式-->
							<view class="prize-type">{{item.draw_type}}</view>
						</view>
					
						<view v-if="!is_main">
							<view class="dreaw-button" @click="add_draw(index)" v-if="!item.bl_id">点击添加</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			listdata: {
				type: Array,
				default () {
					return []
				}
			},
			//是否在品牌主页显示列表
			is_main: {
				type: Boolean,
				default: false
			},
			//奖品类型
			gifttype:{
				type:String,
				default:'being'
			},
			is_self:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				seniorIcon: ['/static/image/dividebag.png', '/static/image/help.png', '/static/image/guarantee.png'],
			}
		},
		methods: {
			//跳转指定抽奖地址
			goto_lottey(index){
				if(!this.is_main){
					return
				}
				let giftitem = this.listdata[index]
				let url = '/pages/lottery/lottery'
				if (giftitem.pType == 'red_envelope') {
					//红包跳转地址
					url = '/pages/bagdraw/drawpage'
				}
				uni.navigateTo({
					url: url + '?id=' + giftitem.id
				})
			},
			
			//添加奖品
			add_draw(index){
				let gifiitem = this.listdata[index]
				//console.log(gifiitem)
				this.$HttRequest({
					url: '/brand/add_show_lottery',
					param: {id: gifiitem.id,type:this.gifttype}
				},'POST',true).then((res) => {
					console.log(res)
					if (res.status === 10000) {
						this.$ShowMsg('奖品添加成功！')
						this.$common.state.dreawshow[this.gifttype].push(gifiitem)
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},2500)
					} else {
						this.$ShowMsg(res.message)
						console.log(res.message)
					}
				}).catch((error) => {
					//异常错误
					console.log("error::"+error)
				})
			},
			
			//删除添加的抽奖
			modeldel(id) {
				this.$HttRequest({
					url: '/brand/delete_show_lottery',
					param: {
						id: id
					}
				},'POST',true).then((res) => {
					//console.log(res)
					if (res.status === 10000) {
						
						this.giftmap(id)
					} else {
						this.$ShowMsg(res.message);
					}
				}).catch((error) => {
					//异常错误
					console.log('error::' + error);
				})
			},
			//遍历数据删除
			giftmap(del_id) {
				let lottey_data = this.$common.state.dreawshow
				let key = ['being', 'expired']
				let item_gift_boject = {
					being: [],
					expired: []
				}
				for (let i = 0; i < key.length; i++) {
					lottey_data[key[i]].map((item, index) => {
						//过滤需要删除的对象
						if (item.id != del_id) {
							item_gift_boject[key[i]].push(item)
						}
					})
				}
				this.$ShowMsg('移除成功')
				this.$common.state.dreawshow = item_gift_boject
			}
		}
	}
</script>

<style lang="scss">
	.prizelist {
		width: 100%;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: relative;

		.prize-box {
			width: 100%;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #f4f4f4;
			position: relative;

			.joinicon {
				display: block;
				width: 109rpx;
				height: 40rpx;
				position: absolute;
				top: 20rpx;
				z-index: 999;
			}

			.prize-item {
				width: 90%;
				margin: 0 auto;
				display: flex;
				justify-content: flex-start;
				align-items: flex-end;
				position: relative;

				.modeldel {
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					top: 0;
					right: 0;
					background: rgba(#000, 0.5);
					color: #fff;
					font-size: 25rpx;
					width: 30rpx;
					height: 30rpx;
				}

				.prizeimg {
					border: 1rpx solid #f4f4f4;
					width: 145rpx;
					height: 130rpx;
					border-radius: 20rpx;
					margin-right: 30rpx;
				}

				.prizedetail {
				 // border: 1rpx solid #000;
					width: 75%;
					display: flex;
					justify-content: flex-start  ;
					align-items: flex-start;
					flex-direction: column;
					height: 125rpx;
					.item-top {
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.title {
							font-size: 32rpx;
							font-weight: bold;

							.count {
								font-size: 28rpx;
								color: #5e5e5e;
								font-weight: normal;
								margin-left: 10rpx;
							}
						}
					}

					.item-bottom {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: flex-end;

						.dreaw-button {
							font-size: 28rpx;
							border-radius: 10rpx;
							border: 1rpx solid #f79c27;
							padding: 10rpx 20rpx;
							color: #f79c27;
							display: flex;
							justify-content: center;
							align-items: center;
							position: absolute;
							right: 0;
							bottom: 0;
						}

						.prize-info {
							display: flex;
							justify-content: center;
							align-items: flex-start;
							flex-direction: column;
							font-size: 28rpx;
							color: #000;

							//普通商户标识
							.sponsor {
								background-color: #f4f4f4;
								padding: 0rpx 10rpx;
								border-radius: 10rpx;
								margin-bottom: 15rpx;
								font-size: 22rpx;
							}

							//认证商户标识
							.blue-auth {
								border-radius: 8rpx;
								background-color: $uni-color-primary;
								padding: 5rpx 5rpx 5rpx 20rpx;
								display: flex;
								justify-content: flex-start;
								align-items: center;
								margin-bottom: 15rpx;

								image {
									border-radius: 0;
									width: 65rpx;
									height: 20rpx;
									margin-right: 10rpx;
								}

								.business {
									font-size: 22rpx;
									color: $uni-color-primary;
									background-color: #fff;
									padding: 0rpx 10rpx;
								}
							}

							.senior {
								display: flex;
								justify-content: flex-start;
								align-items: center;
								margin-bottom: 10rpx;
								height:35rpx;
								
								image {
									border-radius: 0;
									width: 35rpx;
									height: 35rpx;
									margin-right: 8rpx;
								}
							}

							.prize-type {
								color: #5e5e5e;
								font-size: 22rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
